<template>
  <div :class="disabled ? 'inlineblock tag-disabled' : 'inlineblock'">
    <span class="table-tag-small" v-for="(item, index) in labelInfo.slice(0, sliceLength)" :key="index"
          style="margin-bottom: 0">{{
        item
      }}</span>
    <Poptip trigger="hover" :transfer="true" placement="bottom"
            :popper-class="disabled ? 'labelPopStyle labelPopStyleDisabled':'labelPopStyle'" v-if="labelInfo.length > 3"
            style="display: inline-block !important;">
      <span class="table-tag-small font18"
            style="background-color: transparent;border: none;margin-right: 0;margin-bottom: 0;">···</span>
      <span slot="content" class="content">
        <span class="table-tag-small" v-for="(item, index) in labelInfo" :key="index">{{ item }}</span>
      </span>
    </Poptip>
  </div>
</template>
<script>
export default {
  name: "labelInfo",
  props: {
    labelInfo: {
      type: Array,
      default: () => {
        return []
      }
    },
    sliceLength: {
      type: Number,
      default: 3
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  created() {
  },
};
</script>
<style lang="less">
.table-tag-small {
  box-sizing: border-box;
  color: #0085ff;
  border: 1px solid rgb(0, 133, 255);
  background: rgba(0, 133, 255, 0.1);
  margin-right: 7px;
  margin-bottom: 10px;
  border-radius: 2px;
  //max-width: 75px;
  //overflow: hidden;
  //text-overflow: ellipsis;
  //white-space: nowrap;
  display: inline-block;
  cursor: pointer;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  font-weight: normal;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.tag-disabled, .labelPopStyleDisabled {
  .table-tag-small {
    color: #999999;
    border: 1px solid #999999;
    background: rgba(153, 153, 153, 0.1);
  }
}

.labelPopStyle {
  .ivu-poptip-content {
    height: auto;
  }

  .ivu-poptip-body {
    padding: 10px 16px 0 16px;
  }

  .content {
    width: 400px;
    white-space: normal;
    word-break: break-all;
    overflow: auto;
    max-height: 20vh;
    display: block;
  }
}
</style>
